@extends('admin.layouts.header_other')

@section('title',"后台管理系统")
@section('content')

<div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
        <form class="layui-form" action="">
            <div class="amin-content">
                <div class="layui-row layui-col-space15">
                    @csrf
                    <div class="layui-col-md10">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">菜单名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入菜单名称" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-inline">
                                    <input type="radio" lay-verify="status" name="status" value="1" title="启用">
                                    <input type="radio" lay-verify="status" name="status" value="0" title="关闭">
                                </div>
                                <div class="layui-form-mid layui-word-aux">关闭后，管理菜单中此项目将被隐藏</div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">排序</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="psort" lay-verify="sort" autocomplete="off" placeholder="请输入排序" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">列表中显示的顺序</div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">上级菜单</label>
                                <div class="layui-input-inline">
                                    <select name="parent_id" class="parent_id" lay-filter="menu_name">
                                        <option value="0" >顶级菜单</option>
                                        <option value="2">头条二</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item" id="show_icon">
                            <div class="layui-inline">
                                <label class="layui-form-label">菜单图标</label>
                                <div class="layui-input-block" id="icon_list">
                                    <i style="font-size: 30px;" class="layui-icon layui-icon-rate-half"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-rate"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-rate-solid"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-cellphone"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-vercode"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-login-wechat"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-login-qq"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-login-weibo"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-password"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-username"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-refresh-3"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-auz"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-spread-left"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-shrink-right"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-snowflake"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-tips"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-note"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-home"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-senior"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-refresh"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-refresh-1"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-flag"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-theme"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-notice"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-website"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-console"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-face-surprised"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-set"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-template-1"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-app"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-template"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-praise"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-tread"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-male"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-female"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-camera"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-camera-fill"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-more"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-more-vertical"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-rmb"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-dollar"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-diamond"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-fire"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-return"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-location"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-cart"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-next"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-upload-drag"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-upload"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-download-circle"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-component"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-file-b"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-user"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-find-fill"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-add-1"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-play"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-pause"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-headset"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-video"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-voice"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-speaker"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-fonts-del"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-fonts-code"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-fonts-html"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-fonts-strong"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-unlink"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-picture"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-link"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-face-smile-b"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-tabs"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-circle"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-edit"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-share"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-delete"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-form"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-cellphone-fine"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-dialogue"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-fonts-clear"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-layer"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-date"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-water"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-carousel"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-prev-circle"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-layouts"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-util"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-templeate-1"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-upload-circle"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-tree"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-table"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-chart"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-chart-screen"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-engine"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-file"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-404"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-about"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-right"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-circle-dot"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-search"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-set-fill"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-group"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-friends"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-reply-fill"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-menu-fill"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-log"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-picture-fine"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-face-smile-fine"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-list"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-release"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-ok"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-help"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-chat"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-top"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-star"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-star-fill"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-close-fill"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-close"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-ok-circle"></i>
                                    <i style="font-size: 30px;"  class="layui-icon layui-icon-add-circle-fine"></i>
                                </div>
                                <input type="hidden" name="icon"  id="icon_hide" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">菜单路由</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="menu_route" lay-verify="menu_route" autocomplete="off" placeholder="请输入菜单路由" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">点击菜单时访问的页面地址，填相对路由，#号表示不需要地址</div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">授权路由</label>
                            <div class="layui-input-block">
                                <textarea  class="layui-textarea" name="routes"></textarea>
                            </div>
                            <div class="layui-form-mid layui-word-aux">完成此菜单的功能需要的路由，填相对路由，每个路由占用一行</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">信息描述</label>
                            <div class="layui-input-block">
                                <textarea  class="layui-textarea" name="description"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="menu_add">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </form>
    </div>
</div>
<script src="{{asset('attach/js/layui.all.js')}}"></script>
<script>
    layui.use(['jquery','form', 'layer'],function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;
        form.verify({
            title:function (title) {
                if(title==""){
                    return "{{trans('validation.menu_title')}}";
                }
                if(!new RegExp("^[\\u4e00-\\u9fa5]+$", "").test(title)){
                    return "{{trans('validation.menu_title_zh')}}";
                }
             },
            status:function (status) {
                if(status==""){
                    return "{{trans('validation.menu_status')}}";
                }
             },
            sort:function (sort) {
                if(sort==""){
                    return "{{trans('validation.menu_sort')}}";
                }
                if(!new RegExp("^[0-9]*$","").test(sort)){
                    return "{{trans('validation.menu_sort_integer')}}";
                }
            },
            menu_name:function (menu_name) {
                if(menu_name==''){
                    return "{{trans('validation.menu_name')}}";
                }
           },
            menu_route:function (menu_route) {
                if(menu_route==""){
                    return "{{trans('validation.menu_route')}}"
                ;}
            },
        });
        form.on('select(menu_name)', function(data){
            if(data.value==0){
                $("#show_icon").css('display','block');
            }else{
                $("#show_icon").css('display','none');
            }
        });
        $("#icon_list i").click(function () {
            $(this).css({color:"red"}).siblings().css({color:""}).end();
            $("#icon_hide").val($(this).attr('class').split(' ').slice(1).join());
        });
        form.on('submit(menu_add)',function (data) {
            var index = parent.layer.getFrameIndex(window.name);
            var iconVal = $("#icon_list");
            var url='{{route('admin.menu.addData')}}',
                data=$(data.form).serialize();
            $.ajax({
                type:'POST',
                url:url,
                data:data,
                success:function (data) {
                    if(data.code==200){
                        layer.msg(data.msg,{
                            icon:6,
                            time:2000
                        },function () {
                            window.parent.location.reload();//刷新父页面
                            parent.layer.close(index);//关闭弹出层
                        });
                    }else{
                        layer.msg(data.msg,{icon:5});
                        return;
                    }
                },
                complete:function () {
                    layer.close(this.layerIndex)
                }
            })
            return false;
        })


    });
</script>
@endsection